本文內容

接續，Day27 的內容，紀錄閱讀有關 Angular Route 的 pathMatch:prefix 設定內容。

Default (Prefix) path matching strategy

在昨天的文章中，有提到過 pathMatch 設定值有兩個，一個是 prefix，另一個是 full。預設值為 prefix。

prefix 曖昧的字義

prefix 這個字本身是前綴詞的意思，我一開始看到這個設定的時候，很容易誤以為，是不是該路由設定只要符合被比對路由路徑的 "前面" 某個部分，就算符合呢?
但...其實不是，在 pathMatch:prefix 的設定下，代表要完全符合被比對路由路徑，才算符合。
什麼意思呢，還記得昨天被解析出來的被比對路由路徑的內容嗎? /users/Johnny/permission，代表要完全符合這個路徑內容，才算符合喔，缺一不可。

開始比對~

好，解釋完 pathMatch:prefix 的比對機制之後，我就拿被比對路由路徑 /users/Johnny/permission 為對象，並用下列的 route 設定來進行比對
[Route 設定]

const routes: Routes = [
  {
    path: 'products',
    children: [
      {
        path: ':productID',
        component: ProductComponent,
      },
    ],
  },
  {
    path: ':other',
    children: [
      {
        path: 'ramble',
        component: rambleComponent,
      },
    ],
  },
  {
    path: 'user',
    component: userComponent,
  },
  {
    path: 'users',
    children: [
      {
        path: 'authority',
        component: customersAuthorityComponent,
      },
      {
        path: ':customerID',
        children: [
          {
            path: 'comments',
            component: customerCommentsComponent,
          },
          {
            path: 'permission',
            component: customerPermissionComponent,
          },
        ],
      },
    ],
  },
];

ok，可以看到上面的路由設定都沒有特別寫出 pathMatch 的設定內容，那它的設定就是預設值 prefix。

step1. 拆分路由
Angular 在比對路徑的時候，會把它拆分成一部分一部分，然後依序比對，所以，這邊的被比對路徑為 /users/Johnny/permissions，那它就會被拆成三等份，
一 - users
二 - Johnny
三 - permissions
由上到下，依序比對它們。

step2. 開始比對
ok，拆分完之後，就開始比對吧。
首先，比對 users
第一個 route 物件的 path 是 products，而 products !== users ，所以，這個不符合，下面一位~~

第二個 route 物件的 path 是 :other ，這個前面有接 : 的路由是動態路由，所以，它可以是任何值，所以，過關。
接著，比對它的子路由 path 是 ramble。它跟被比對路由的第二個部分 Johnny 不一樣，所以，這個不符合。

第三個 route 物件的 path 是 user，而 user !== users ，所以，這個不符合。

第四個 route 物件的 path 是 users，過關。
再來它的第一個子路由 path 是 authority ，這個不符合。
換下一個子路由 path 是 :customerID ，它是動態路由，所以可以接受任何值，所以，過關。
最後，再進它的子路由 path 是 comments，這個不符合。換另一個子路由 path 是 permission，過關 !!!!

所以，經過以上的重重重重的比對之後，我們知道，是最後一組的 route 物件的路由路徑設定內容與被比對路由路徑完全相同，所以，最後，會被渲染到畫面上的元件內容為 customerPermissionComponent。

Summary

來做個總結

1. Anuglar 會把比對的路由拆解成好幾份，然後，依序比對每一個部分。
2. 當 pathMatch:prefix 時，要完全符合整個路由路徑，才能判定該路由規則完全符合。